<script setup>

// 修改 不在接收组件传递来的参数，直接渲染 useInChatContactInfStore 中的内容
import { computed } from 'vue'
import { useUserInfoStore } from '@/stores/useUserInfoStore.js'
const userInfoStore = useUserInfoStore()
const props = defineProps({
    message: {
        default: '',
    },
    fromUsername: {
        default: '',
    },
    toUsername: {
        default: '',
    },
    content: {
        default: '',
    },
    createTime: {
        default: '',
    },
    type: {
        default: '',
    },
    imgSrc: {
        default: '',
    },
})

const isSelf = computed(() => {
    return props.fromUsername === userInfoStore.userName
})

</script>

<template>
    <div style="width: 100%">
        <div v-if="!isSelf" style="display: flex; max-width: 80%; min-width: 300px;">
            <div>
                <img class="avatar" :src=props.imgSrc alt="" />
            </div>
            <div>
                <div class="name-box">
                    <h3 style="margin-bottom: 3px">{{ props.fromUsername }}</h3>
                </div>
                <div>
                    <p class="message-box">{{ props.message }}</p>
                </div>
            </div>
        </div>
        <div
            v-if="isSelf"
            style="
                position: relative;
                left: 20%;
                display: flex;
                max-width: 80%;
                justify-content: flex-end;
            "
        >
            <div style="position: relative">
                <div class="name-box" style="position: absolute; right: 0px">
                    <h3 style="margin-bottom: 3px">{{ props.fromUsername }}</h3>
                </div>
                <div style="margin-top: 20px">
                    <p class="message-box">{{ props.message }}</p>
                </div>
            </div>
            <div>
                <img
                    class="avatar"
                    style="margin-left: 10px; margin-right: 0"
                    :src=userInfoStore.headImgUrl
                    alt=""
                />
            </div>
        </div>
    </div>
</template>

<style scoped>
.avatar {
    width: 70px;
    height: 70px;
    border-radius: 15px;
    margin-right: 10px;
}

.name-box {
    display: flex;
    line-height: 20px;
}

.message-box {
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal; /* 允许换行 */
    max-width: 100%; /* 确保不会溢出父容器 */
    background-color: var(--mygreey);
    padding: 10px;
    border-radius: 12px;
}
</style>
